<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>012</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 150px;
				height: 150px;
				margin-bottom: 10px;
				background-color: orange;
			}
			.green {
				background-color: green;
			}
			img {
				width: 100%;
				height: 100%;
			}
			
		</style>
	</head>
	<body>
		<div class="box" id="box1">hello，world！</div>
		<div class="box" id="box2"></div>
		<button class="btn1">添加类名</button>
		<button class="btn2">移除类名</button>
		<div class="box" id="box3"></div>
		<div class="box" id="box4">
			<img src="../img/a01.jpg" id="pic" />
		</div>
		
		
		
		<!--引入jquery包-->
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//html()：1.获取box的内部文本
			console.log($("#box1").html());
			//2.改变box的内部文本
			$("#box1").html("你好,世界!");
			//3.添加节点
			$("#box2").html("<ul><li>我是新添加节点中的内容</li></ul>")
			
			
			//addClass()：添加类名
			$(".btn1").click(function() {
				$("#box3").addClass("green");
			})
			
			
			//removeClass()：移除类名
			$(".btn2").click(function() {
				$("#box3").removeClass("green");
			})
			
			
			//attr()：attrbute（属性）的简写，设置元素的原有属性
			//添加鼠标移入事件
			$("#box4").mouseenter(function() {
				$("#pic").attr("src","../img/a03.jpg");
			})
			//添加鼠标离开事件
			$("#box4").mouseleave(function() {
				$("#pic").attr("src","../img/a01.jpg");
			})
			
		</script>
	</body>
</html>
